/*
* @Author: majingyu
* @Date:   2017-05-26 21:33:31
* @Last Modified by:   jingyu.ma
* @Last Modified time: 2017-08-06 14:21:06
*/

import React, { Component }from 'react';
import { connect } from 'react-redux';
import RequireList from 'components/requireList.jsx';
import OrderList from 'components/myOrder.jsx';
import { searchMyOrderInfoAction, cacalOrderById ,changeOrderDetailId} from 'action/orders.js';
import { editOrderToCommont } from 'action/commont.js';
import 'css/components/tabs.less';
class MyOrderLists extends Component {
    constructor(props) {
        super(props);
        this.getOrders(0);
        this.state = {
           active: 'all' 
        }
    }  
    getMoreList(){
        this.getOrders(this.props.orders.ordersList.pageNo+1)
    }
    getOrders(status,page){
        let data = {
            pageNumber: page || this.props.orders.ordersList.pageNo,
            pageSize:10,
            status:status
        }
        this.props.getOrders(data);
    }
    changeActive(status,tabName){
        let active = status == 1?'order':'service';
        this.setState(Object.assign({},this.state,{
            active: active
        }))
       this.getOrders(status);
    }
    goToDetail(id){
        this.props.goToDetailPage(id);
        window.location.href = '#/orderDetail';
    }
    goCommont(id){
        this.props.goCommont(id);
        window.location.href = '#/evaluate';
    }
    render(){
        return (
            <div className="content">
                <ul className="subNavWrap">
                    <li key='allOrder' onClick={()=>{this.changeActive(0,'all')}} className={this.state.active == 'all'?'active':''}>全部</li>
                    <li key='toReceive' onClick={()=>{this.changeActive(1,'toReceive')}} className={this.state.active == 'toReceive'?'active':''}>已邀请</li>
                    <li key='receive' onClick={()=>{this.changeActive(2,'receive')}} className={this.state.active == 'receive'?'active':''}>已接收</li>
                    <li key='toBeDone' onClick={()=>{this.changeActive(3,'toBeDone')}} className={this.state.active == 'toBeDone'?'active':''}>待完成</li>
                    <li key='hasDown' onClick={()=>{this.changeActive(4,'hasDown')}} className={this.state.active == 'hasDown'?'active':''}>已完成</li>
                </ul>
               <OrderList orderLists = {this.props.orders.ordersList} goToDetail={(id) => {this.goToDetail(id)}} cacalOrder={(id) => {this.props.cacalOrder(id)}} goCommont={(id) => {this.goCommont(id)}} getMoreList={()=>{this.getMoreList()}}/>
            </div>
        );
    }
}

const MyOrderData = (state) => {
    return {
        orders: state.orders,
        user: state.user
    }
}
let dispatchHandle = (dispatch, getState) => {
    return {
        getOrders(data){
            dispatch(searchMyOrderInfoAction(data));
        },
        goToDetailPage(id){
            dispatch(changeOrderDetailId(id));
        },
        cacalOrder(id){
            let params = {
                orderId: id
            }
            dispatch(cacalOrderById(params));
        },
        goCommont(id){
            dispatch(editOrderToCommont(id));
        }
    }    
}
let visibileMyOrder= connect(MyOrderData, dispatchHandle)(MyOrderLists);


export default visibileMyOrder;